<template>
    <div style="width: 800px;">
        <h3 style="text-align: left;">编辑仓库</h3>
        <el-divider></el-divider>

        <el-form :model="info" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="仓库编号：" prop="warehouseCode">
                <el-input v-model="info.warehouseCode" readonly placeholder="可不填写，自动生成"></el-input>
            </el-form-item>

            <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                    <el-form-item label="仓库名称：" prop="name">
                        <el-input v-model="info.name" maxlength="10" show-word-limit></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                    <el-form-item label="仓库类型：" prop="name">
                        <el-input v-model="info.warehouseType"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                    <el-form-item label="仓库用途：" prop="usage">
                        <el-input v-model="info.usage"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                    <el-form-item label="租赁时间：" prop="lleaseTime">
                        <el-date-picker v-model="info.lleaseTime" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                    <el-form-item label="面积：" prop="area">
                        <el-input v-model="info.area"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                    <el-form-item label="地址：" prop="address">
                        <el-input v-model="info.address"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                    <el-form-item label="联系人：" prop="contacts">
                        <el-input v-model="info.contacts"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                    <el-form-item label="电话：" prop="phone">
                        <el-input v-model="info.phone"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-form-item>
                <el-button type="primary" @click="save('ruleForm')">编辑</el-button>
                <el-button @click="resetForm()">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { FilWarehouseDto, UpdWarehouseManagerment } from "@/api/BasicsDatumServer/WarehouseManagerment";
export default {
    //数据
    data() {
        return {
            //获取所有控件值
            info: {
                id: "",
                warehouseCode: "",
                name: "",
                lleaseTime: "",
                warehouseType: "",
                usage: "",
                address: "",
                area: "",
                contacts: "",
                phone: "",
            },
            //校验
            rules: {
                name: [
                    { required: true, message: '请输入仓库名称', trigger: 'blur' },
                ],
                warehouseType: [
                    { required: true, message: '请输入仓库类型', trigger: 'blur' },
                ],
                usage: [
                    { required: true, message: '请输入仓库用途', trigger: 'blur' },
                ],
                lleaseTime: [
                    { required: true, message: '请选择租赁时间', trigger: 'change' }
                ],
                area: [
                    { required: true, message: '请输入仓库面积', trigger: 'blur' },
                ],
                address: [
                    { required: true, message: '请输入地址', trigger: 'blur' },
                ],
                contacts: [
                    { required: true, message: '请输入联系人', trigger: 'blur' },
                ],
                phone: [
                    { required: true, message: '请输入电话', trigger: 'blur' },
                ],
            },
        }
    },
    //方法
    methods: {
        //反填仓库
        FilWarehouseDto() {
            let data = {
                id: this.$route.query.id
            };

            FilWarehouseDto(data).then(res => {
                let f = res.data.data;

                this.info = {
                    id: f.id,
                    warehouseCode: f.warehouseCode,
                    name: f.name,
                    lleaseTime: f.lleaseTime,
                    warehouseType: f.warehouseType,
                    usage: f.usage,
                    address: f.address,
                    area: f.area,
                    contacts: f.contacts,
                    phone: f.phone,
                }
            })
        },
        //修改
        save(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    UpdWarehouseManagerment(this.info).then(res => {
                        if (res.data.totalCount > 0) {
                            this.$message.success('修改成功');
                        }
                        else {
                            this.$message.error('修改失败');
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //跳转到列表页面
        resetForm() {
            //跳转到列表页面
            this.$router.push("/BasicsDatumServer/WarehouseManagerment/WarehouseManagermentList");
        }
    },
    //勾子函数加载数据
    created() {
        this.FilWarehouseDto();
    },
}
</script>

<style></style>